<template>
  <div class="inputBox">
    <input class="needsclick" type="file" v-show="false" accept="image/*" @change="fileChanged" ref="file" multiple="multiple">
  </div>
</template>

<script>
import { mineApi } from '@/api'
import iMlrz from 'lrz'
import * as qiniu from 'qiniu-js'
export default {
  name: 'qiniu-upload',
  props: ['showWechatPay', 'showAliPay'],
  data() {
    return {
      status: 'ready',
      files: [],
      token: {},
      domain: '',
      uploading: false,
      percent: 0,
      config: {
        useCdnDomain: true,
        disableStatisticsReport: false,
        retryCount: 6,
        region: qiniu.region.z0
      },
      putExtra: {
        fname: '',
        params: {},
        mimeType: null
      }
    }
  },
  components: {},
  async created() {
    const res = await mineApi.getQiNiuToken()
    this.token = res.data.uploadToken
    this.domain = res.data.host
  },
  methods: {
    museClick() {
      this.$refs.file.click()
    },
    fileChanged(e) {
      if (typeof FileReader === 'undefined') {
        alert('你的浏览器不支持上传图片哟！')
        return
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '上传中'
      })
      const list = this.$refs.file.files
      for (let i = 0; i < list.length; i++) {
        if (!this.isContain(list[i])) {
          const item = {
            name: list[i].name,
            size: list[i].size,
            file: list[i]
          }
          const _this = this
          iMlrz(list[i], {
            quality: 0.3,
            width: 600,
            fieldName: 'headimg'
          }).then(function(rst) {
            const observable = qiniu.upload(rst.file, 'upf' + new Date().getTime(), _this.token, _this.putExtra, _this.config)
            observable.subscribe({
              next(res) {
                // console.log('next', res)
              },
              error(err) {
                console.log('err', err)
                _this.$toast.clear()
              },
              complete(res) {
                _this.$toast.clear()
                _this.$emit('selectFinish', _this.domain + '/' + res.key, rst)
              }
            })
          }).catch(function(err) {
            console.log('err', err)
            _this.$toast.clear()
            alert('浏览器不支持上传图片')
          })
          this.files.push(item)
        }
      }
      this.$refs.file.value = ''
    },
    isContain(file) {
      this.files.forEach(item => {
        if (item.name === file.name && item.size === file.size) {
          return true
        }
      })
      return false
    }
  },
  computed: {}
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*付款弹层*/
  .hide-box{
    width: 100%;
    height: 100vh;
  }
  .dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    z-index: 999;
    transition: all 0.5s;
    .dialog-content {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      background: #fff;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    opacity: 1;
  }

  .fade-enter,
  .fade-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }

</style>
